<template>
  <div class="card-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>报修详情</span>
          <el-button type="primary" @click="handleBack">返回</el-button>
        </div>
      </template>
    </el-card>
    <div class="card-header">
      <h2>报修进度概览</h2>
    </div>

    <div class="card-content">
      <!-- 状态统计 -->
      <div class="status-section">
        <div class="status-title">报修状态统计</div>
        <div class="status-cards">
          <div class="status-card unprocessed">
            <div class="card-title">未处理</div>
            <div class="card-count">{{ statusCount.unprocessed }}</div>
          </div>
          <div class="status-card processing">
            <div class="card-title">处理中</div>
            <div class="card-count">{{ statusCount.processing }}</div>
          </div>
          <div class="status-card completed">
            <div class="card-title">已完成</div>
            <div class="card-count">{{ statusCount.completed }}</div>
          </div>
          <div class="status-card submitted">
            <div class="card-title">已提交</div>
            <div class="card-count">{{ statusCount.submitted }}</div>  <!-- 修复这里 -->
          </div>
        </div>
      </div>

      <!-- 报修列表 -->
      <div class="repair-list">
        <div class="status-title">报修记录</div>
        <div class="repair-items">
          <!-- 添加加载状态 -->
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else-if="repairList.length === 0" class="no-data">暂无数据</div>

          <div class="repair-item" v-for="item in repairList" :key="item.repairId">
            <div class="repair-info">
              <div class="repair-id">维修单号: {{ item.repairId }}</div>
              <div class="repair-details">
                {{ item.reporter }} | {{ item.reportTime }} | {{ item.description }}
              </div>
            </div>
            <div class="repair-actions">
              <span class="repair-status" :class="'status-' + getStatusClass(item.status)">
                {{ getStatusText(item.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { lookstream } from "@/api/property/repair"
import { ref, onMounted } from 'vue';

// 获取 router 实例
const router = useRouter()

// 返回列表页
function handleBack() {
  router.push('/property/repair')
}

// 状态统计
const statusCount = ref({
  submitted: 0,
  unprocessed: 0,
  processing: 0,
  completed: 0
});

// 计算状态数量 - 修复版本
const calculateStatusCount = () => {
  statusCount.value = {
    submitted: repairList.value.filter(item => item.status === 1).length,    // 已提交
    unprocessed: repairList.value.filter(item => item.status === 3).length,  // 未处理
    processing: repairList.value.filter(item => item.status === 2).length,   // 处理中
    completed: repairList.value.filter(item => item.status === 0).length     // 已完成
  };
  console.log('状态统计:', statusCount.value); // 添加日志便于调试
};

// 状态文本映射
const getStatusText = (status) => {
  const statusMap = {
    0: '已完成',
    1: '已提交',
    2: '处理中',
    3: '未处理'
  };
  return statusMap[status] || '未知状态';
};

// 状态样式类名映射
const getStatusClass = (status) => {
  const classMap = {
    0: 'completed',
    1: 'submitted',
    2: 'processing',
    3: 'unprocessed'
  };
  return classMap[status] || 'unknown';
};

// 加载状态
const loading = ref(false);

const repairList = ref([]);

// 获取报修列表数据
const fetchRepairList = async () => {
  try {
    loading.value = true;
    const resp = await lookstream()
    console.log('API响应数据:', resp);
    console.log('数据行:', resp.rows);

    // 确保返回的数据是数组格式
    if (Array.isArray(resp.rows)) {
      repairList.value = resp.rows;
      console.log('处理后的报修列表:', repairList.value);

      // 计算每种状态的数量用于调试
      const statusDistribution = {
        0: repairList.value.filter(item => item.status === 0).length,
        1: repairList.value.filter(item => item.status === 1).length,
        2: repairList.value.filter(item => item.status === 2).length,
        3: repairList.value.filter(item => item.status === 3).length
      };
      console.log('状态分布:', statusDistribution);

      calculateStatusCount();
    } else {
      repairList.value = [];
    }
  } catch (error) {
    console.error('获取报修列表失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchRepairList();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 状态卡片样式 */
.status-card {
  flex: 1;
  min-width: 200px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-left: 4px solid;
}

.status-card.submitted {
  border-left-color: #909399; /* 灰色 */
}

.status-card.unprocessed {
  border-left-color: #e6a23c; /* 橙色 */
}

.status-card.processing {
  border-left-color: #409eff; /* 蓝色 */
}

.status-card.completed {
  border-left-color: #67c23a; /* 绿色 */
}

/* 状态标签样式 */
.repair-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.status-submitted {
  background-color: #909399;
}

.status-unprocessed {
  background-color: #e6a23c;
}

.status-processing {
  background-color: #409eff;
}

.status-completed {
  background-color: #67c23a;
}

/* 其他原有样式保持不变 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.5;
}

.app-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.card-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

.card-header h2 {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.card-content {
  padding: 20px;
}

.status-section {
  margin-bottom: 30px;
}

.status-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #606266;
}

.status-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #606266;
}

.card-count {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.repair-list {
  margin-top: 30px;
}

.repair-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.repair-item:last-child {
  border-bottom: none;
}

.repair-info {
  flex: 1;
}

.repair-id {
  font-weight: 500;
  margin-bottom: 5px;
}

.repair-details {
  font-size: 14px;
  color: #909399;
}

.loading, .no-data {
  text-align: center;
  padding: 20px;
  color: #909399;
}
</style>